<template>
	<div>
		<div style="
        width: 1050px;
        margin: 0 auto;
        margin-top: 20px;
        border: 1px #ccc solid;
      ">
			<div class="header">用户登录</div>
			<div class="login">
				<div class="right">
					<el-tabs v-model="activeName">
						<el-tab-pane
							label="会员登录"
							name="first"
						>
							<el-form
								:model="operateUser"
								:rules="checkOperateUser"
								ref="ruleForm"
								label-width="100px"
								class="demo-ruleForm"
							>
								<p>请直接使用手机号、密码登录</p>
								<el-form-item
									label="手机号"
									prop="mobile"
								>
									<el-input v-model="operateUser.mobile"></el-input>
								</el-form-item>
								<el-form-item
									label="密码"
									prop="password"
								>
									<el-input
										type="password"
										v-model="operateUser.password"
									></el-input>
								</el-form-item>
								<el-form-item>
									<el-button
										type="primary"
										class="btn"
										@click="login"
									>登 录</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

					</el-tabs>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Cookies from 'js-cookie'
	export default {
		data() {
			return {
				activeName: "first",
				operateUsers: {},
				operateUser: {},
				checkOperateUser: {
					Mobile: [
						{ required: true, message: "请输入用户手机号", trigger: "blur" },
						{ min: 1, max: 11, message: "长度在 11 个字符", trigger: "blur" },
					],
					Password: [
						{ required: true, message: "请输入用户密码", trigger: "blur" },
					],
				},
			};
		},
		methods: {
			login() {
				if (this.operateUser.mobile == "undifi") {
					this.$message({
						message: '用户的电话不能为空哦！！！！',
						type: 'warning'
					});

					return false;
				}
				if (this.operateUser.password == "") {
					this.$message({
						message: '用户的密码不能为空哦！！！！',
						type: 'warning'
					});

					return false;
				}
				this.$http.post("http://localhost/api/core/userInfo/login", this.operateUser).then(res => {
					if (res.data.code == 0) {
						this.operateUsers = res.data.data.user;
						var now = new Date();
						var minutes = 30;
						now.setTime(now.getTime() + (minutes * 60 * 1000));
						document.cookie = "operateUsers=" + JSON.stringify(this.operateUsers) + ";expires=" + now.toUTCString() + ";"
						this.$router.push({ path: "/" });
						location.reload();
					} else {
						this.$message.error(res.data.message);
					}
				})
			}
		},
	};
</script>

<style scoped>
	.header {
		background: #ccc;
		padding: 10px;
		color: red;
	}

	.login {
		padding: 20px;
		display: flex;
		justify-content: space-between;
	}

	.login .left {
		width: 48%;
		margin-top: 25px;
	}

	.login .left p {
		text-align: center;
		color: #666;
		letter-spacing: 3px;
	}

	.login .left img {
		margin-left: 12%;
	}

	.login .right {
		width: 48%;
	}

	.login .right p {
		margin: 20px 0;
		color: red;
		margin-left: 37px;
	}

	.btn {
		width: 100% !important;
		font-size: 16px !important;
	}
</style>
